import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { FaGoogle, FaGithub, FaTimes } from 'react-icons/fa';
import './auth-modal.css';

const AuthModal = ({ isOpen, onClose }) => {
  const [mode, setMode] = useState('login');
  const { register, handleSubmit, watch, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    // FUTURE DEV: API集成
    // - POST /api/auth/login
    // - POST /api/auth/register
  };

  const handleThirdPartyAuth = (provider) => {
    // FUTURE DEV: 第三方登录集成
    // - Google OAuth
    // - GitHub OAuth
  };

  if (!isOpen) return null;

  return (
    <div className="auth-modal-overlay">
      <div className="auth-modal">
        <button className="close-button" onClick={onClose}>
          <FaTimes />
        </button>

        <div className="auth-header">
          <h2>{mode === 'login' ? '登录' : '注册'}</h2>
          <p className="mode-switch">
            {mode === 'login' ? '还没有账号？' : '已有账号？'}
            <button 
              onClick={() => setMode(mode === 'login' ? 'signup' : 'login')}
              className="switch-button"
            >
              {mode === 'login' ? '立即注册' : '立即登录'}
            </button>
          </p>
        </div>

        <form onSubmit={handleSubmit(onSubmit)} className="auth-form">
          {mode === 'signup' && (
            <div className="form-group">
              <label htmlFor="username">用户名</label>
              <input
                id="username"
                type="text"
                {...register('username', { required: '请输入用户名' })}
                className={errors.username ? 'error' : ''}
              />
              {errors.username && (
                <span className="error-message">{errors.username.message}</span>
              )}
            </div>
          )}

          <div className="form-group">
            <label htmlFor="email">邮箱</label>
            <input
              id="email"
              type="email"
              {...register('email', {
                required: '请输入邮箱',
                pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                  message: '请输入有效的邮箱地址'
                }
              })}
              className={errors.email ? 'error' : ''}
            />
            {errors.email && (
              <span className="error-message">{errors.email.message}</span>
            )}
          </div>

          <div className="form-group">
            <label htmlFor="password">密码</label>
            <input
              id="password"
              type="password"
              {...register('password', {
                required: '请输入密码',
                minLength: {
                  value: 8,
                  message: '密码至少需要8个字符'
                }
              })}
              className={errors.password ? 'error' : ''}
            />
            {errors.password && (
              <span className="error-message">{errors.password.message}</span>
            )}
          </div>

          {mode === 'signup' && (
            <div className="form-group">
              <label htmlFor="confirmPassword">确认密码</label>
              <input
                id="confirmPassword"
                type="password"
                {...register('confirmPassword', {
                  required: '请确认密码',
                  validate: value => 
                    value === watch('password') || '两次输入的密码不一致'
                })}
                className={errors.confirmPassword ? 'error' : ''}
              />
              {errors.confirmPassword && (
                <span className="error-message">{errors.confirmPassword.message}</span>
              )}
            </div>
          )}

          <button type="submit" className="submit-button">
            {mode === 'login' ? '登录' : '注册'}
          </button>
        </form>

        <div className="divider">
          <span>或</span>
        </div>

        <div className="third-party-auth">
          <button 
            className="third-party-button google"
            onClick={() => handleThirdPartyAuth('google')}
          >
            <FaGoogle />
            Google登录
          </button>
          <button 
            className="third-party-button github"
            onClick={() => handleThirdPartyAuth('github')}
          >
            <FaGithub />
            GitHub登录
          </button>
        </div>
      </div>
    </div>
  );
};

export default AuthModal; 